<template>
  <div class="code-invite-container" v-title data-title="满易金新人专享礼包">
    <img class="back-img" src="/static/img/link_share_bg@2x.png"/>
    <div class="invite-person"><span class="name">{{userName|nameEllipsis}}</span> 邀您领取</div>
    <div class="form-group">
      <input type="number" class="phone-input" v-model="phone" v-if="showPhoneInput" placeholder="请输入手机号码">
      <div v-if="!showPhoneInput" class="input-container" style="position: relative">
        <input type="text" class="code-input" placeholder="请输入短信验证码" v-model="identifyCode"/>
        <div v-if="countDownNum === 0" @click="getIdentifyCode" class="get-tel-code-btn">获取验证码</div>
        <div v-if="countDownNum !== 0" class="disabled-code-btn">剩余（{{countDownNum}}s）</div>
      </div>
      <voice-auth-code v-if="!showPhoneInput" class="voice-auth-code" ref="voiceAuthCode"
                       @sendVoiceSms="getIdentifyCode"></voice-auth-code>
      <button @click="getGift" class="click-btn" :class="{'m-t':showPhoneInput}">立即领取</button>
    </div>
    <div class="pro-list">
      <div class="pro-card" :class="{'border-bottom':index!=1}" v-for="(pro,index) in recommendProList">
        <div class="title">
          <span class="main">{{pro.productName}}</span>
          <span class="label">秒批</span>
        </div>
        <div class="pro-ctn">
          <div class="item">
            <span class="ctn">{{pro.loanMax | formatUnit|subString(pro)}}<span class="unit">{{pro.unit}}</span></span>
            <span class="desc">最高额度</span>
          </div>
          <div class="item">
            <span class="ctn">{{pro.minRate}}<span class="unit">%</span></span>
            <span class="desc">最低月利率</span>
          </div>
          <div class="item">
            <button class="btn" @click="apply(pro)">立即申请</button>
          </div>
        </div>
      </div>
    </div>
    <div class="advantage">
      <div class="title">平台优势</div>
      <div class="item-list">
        <div class="item-card" v-for="item in advantageList">
        <img class="item-img" :src="item.imgUrl"/>
        <div class="item-ctn">
          <span class="name">{{item.name}}</span>
          <span class="desc">{{item.desc}}</span>
        </div>
        </div>
      </div>
    </div>
    <div class="bottom">— 满易金 · 满意轻松借到钱 —</div>
  </div>
</template>
<script>
  import {mapState, mapMutations} from 'vuex'
  import {isvalidPhone} from '@/common/validata'
  import {httpReq} from '@/common/api'
  import {appDownloadUrl} from '@/common/constant'
  import voiceAuthCode from '@/components/voiceAuthCode.vue'

  export default {
    name: 'gift',
    computed: {
      ...mapState({
        token: 'token'
      })
    },
    components: {
      voiceAuthCode
    },
    data() {
      return {
        advantageList:[{
          imgUrl:'/static/img/ic_edu@2x.png',
          name:'额度高',
          desc:'最高额度30万,0抵押0担保'
        },{
          imgUrl:'/static/img/ic_lilv@2x.png',
          name:'利率低',
          desc:'2000元借1天仅需0.2元,日息低至 0.02%'
        },{
          imgUrl:'/static/img/ic_shenpi@2x.png',
          name:'审批快',
          desc:'申请流程简单，最快30秒审批'
        },{
          imgUrl:'/static/img/ic_fangkuan@2x.png',
          name:'放款快',
          desc:'申请成功, 1小时快速到账'
        }],
        phone: '',
        identifyCode: '',
        extensionCode: '',
        userName: '',
        countDownNum: 0,
        showPhoneInput: true,
        recommendProList: []
      }
    },
    methods: {
      ...mapMutations(['changeUserTel', 'changeUserToken', 'changeProduct']),
      countDown() {
        this.countDownNum = 60
        let clock = setInterval(() => {
          this.countDownNum--
          if (this.countDownNum === 0) {
            clearInterval(clock)
          }
        }, 1000)
      },
      getGift() {
        if (!this.phone || !isvalidPhone(this.phone)) {
          this.$toast('请填写正确的手机号码')
          return
        }
        if (this.showPhoneInput) {
          this.showPhoneInput = false
          this.getIdentifyCode('sms')
          return
        }
        if (!this.identifyCode) {
          this.$toast('请填写验证码')
          return
        }
        const data = {
          channel: 'h5',
          mobile: this.phone,
          code: this.identifyCode,
          extensionCode: this.extensionCode
        };
        httpReq('POST', '/list/finance/app/normal/register', {}, data).then((res) => {
          this.changeUserTel(this.phone)
          this.changeUserToken(res.token)
          this.$toast('注册成功!')
          window.location.href = appDownloadUrl;
        }).catch((err) => {
          this.$toast(err);
          if (typeof err === 'string' && err.indexOf('您已注册过') > -1) {
            setTimeout(() => {
              this.$router.push('/')
            }, 1000)
          }
        })
      },
      getIdentifyCode: function (type) {
        const params = {
          mobile: this.phone,
          type: 2
        };
        switch (type) {
          case 'sms':
            httpReq('POST', '/list/finance/app/sendSms', params).then((res) => {
              this.$toast('验证码已发送，请注意查收');
              this.countDown()
            }).catch((err) => {
              this.$toast(err)
            })
            break;
          case 'voice':
            httpReq('POST', '/list/finance/app/sendSms/Voice', params).then((res) => {
              this.$refs.voiceAuthCode.showTip()
              this.countDown()
            }).catch((err) => {
              this.$toast(err)
            })
            break;
        }
      },
      //获取前两个推荐产品
      getRecommendPro() {
        const params = {
          pageNum: 1,
          pageSize: 2,
          keyword: 1
        };
        httpReq('GET', '/list/as/app/financial/normal/loanSupermarketProduct', params).then((res) => {
          this.recommendProList = res.rows
        })
      },
      apply(pro) {
        this.changeProduct(pro);
        this.$router.push({
          name: 'product',
          query: {
            id: pro.id,
            name: pro.productName
          }
        })
      }
    },
    created() {
      if (this.token) {
        this.$router.push('/');
        return
      }
      this.extensionCode = this.$route.query.extensionCode
      this.userName = decodeURIComponent(this.$route.query.userName);
      this.getRecommendPro()
    },
    filters: {
      //截取最后一位
      subString(val, pro) {
        val = val.toString()
        const lastStr = val.substring(val.length - 1)
        if (lastStr != 0) {
          pro.unit = lastStr;
          return val.substring(0, val.length - 1)
        }
        return val
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .m-t
    margin-top .7rem !important

  .voice-auth-code
    margin-top 15px

  .code-invite-container
    position relative
    .back-img
      width 100%
    .invite-person
      position absolute
      top 2.5%
      left 50%
      transform translateX(-50%)
      line-height .8rem
      font-size .3rem
      color #FADBBA
    .form-group
      position absolute
      top 27.5%
      left 50%
      transform: translateX(-50%)
      width 90%
      border-radius .32rem
      padding .6rem .46rem
      box-sizing border-box
      display flex
      flex-direction column
      background-color white
      .desc
        color #BA915E
        font-size .38rem
        font-weight bold
      .phone-input
        height .9rem
        border-radius .08rem
        padding 0 .2rem
        border 1px solid #D7D7D7
      input:
      :-webkit-input-placeholder
        color: $placeholderColor
        letter-spacing: .01rem
      .input-container
        text-align center
        position relative
        .code-input
          width 100%
          box-sizing border-box
          margin-top .3rem
          height .9rem
          border-radius .08rem
          padding 0 .2rem
          border 1px solid #D7D7D7
          position relative
        .get-tel-code-btn, .disabled-code-btn
          position absolute
          right .2rem
          color $darkTextColor
          font-weight bold
          top 50%
        .disabled-code-btn
          font-weight normal
          color $disabledText
      .click-btn
        box-shadow 0px 5px 25px #FFE8D6
        line-height .88rem
        color white
        background: linear-gradient(to right, $gradientDeep, $gradientTint)
        font-size .3rem
        border-radius .08rem
        margin-top .16rem
        height .88rem
    .pro-list
      position absolute
      left 50%
      transform: translateX(-50%)
      top 43%
      width 90%
      border-radius .32rem
      padding .4rem .46rem
      box-sizing border-box
      background-color white
      .pro-card
        display flex
        flex-direction column
        .title
          display flex
          align-items flex-end
          .main
            color $darkTextColor
            font-size .3rem
            font-weight bold
          .label
            margin-left .1rem
            color #FFA940
            border .01rem solid #FFA940
            border-radius .2rem
            font-size .24rem
            padding .05rem .2rem
            box-sizing border-box
        .pro-ctn
          display flex
          align-items flex-end
          padding .4rem 0
          box-sizing border-box
          .item
            display flex
            flex-direction column
            flex 1
            .ctn
              color: #F34D3C
              font-weight bold
              font-size .6rem
              .unit
                margin-left .05rem
                font-weight normal
                font-size .3rem
            .desc
              color $disabledText
              margin-top .16rem
              font-size .24rem

            .btn
              height .74rem
              margin-bottom .06rem
              line-height .74rem
              border-radius .38rem
              background: linear-gradient(to right, $gradientDeep, $gradientTint)
              color white
      .pro-card + .pro-card
        margin-top .4rem

    .advantage
      position absolute
      left 50%
      transform: translateX(-50%)
      top 65.3%
      width 90%
      border-radius .32rem
      padding .6rem .62rem
      box-sizing border-box
      background-color white
      .title
        color #AC946D
        font-size .32rem
        font-weight bold
        width 5.12rem
        height .22rem
        background url("/static/img/advantage.png")no-repeat
        background-size 100% 100%
        text-align center
      .item-list
        display flex
        flex-direction column
        .item-card
          display flex
          align-items center
          margin-top .4rem
          .item-img
            width 1.2rem
            height 1.2rem
          .item-ctn
            margin-left .6rem
            display flex
            flex-direction column
            .name
              font-size .32rem
              font-weight bold
              color $darkTextColor
            .desc
              font-size .26rem
              color $disabledText
              margin-top .1rem

    .bottom
      text-align center
      width 100%
      color #D0A076
      position absolute
      font-size .24rem
      top 98%
</style>
